<template>
    <div class="select_sale_order_container">
        <headerTemplate slot="header" ref="header"
                        :toolbar_buttons="headerOption.toolbar_buttons"
                        :searchForm="searchForm"
                        @event="handleHeaderEvent">
            <template slot="right_search">
                <v-select-bottom v-model="searchForm.client_sid" type="clientsDrawer"
                                 :options="clientOptions" @event="initSaleOrderList(true)"
                                 style="width: 120px;" />
                <el-date-picker v-model="searchForm.order_date" type="date"
                                value-format="yyyy-MM-dd" placeholder="选择销售日期"
                                style="width: 150px;" @change="initSaleOrderList(true)" />
            </template>
        </headerTemplate>
        <div class="table_area">
            <vxeTableTemplate ref="selectTable" :data="dataList" :options.sync="tableOptions"
                              @event="handleTableEvent" />
        </div>
    </div>
</template>

<script>
export default {
    name: "SelectSaleOrder",
    props: {
        data: {
            type: Object,
            default: null,
        },
    },
    data() {
        const _this = this;
        return {
            clientOptions: {
                disabled: false,
                placeholder: '客户选择',
                bottomAction: {
                    permission: 'save_sys_client',
                    permissionUrl: '/sysClients',
                },
            },
            searchForm: {
                state: '',
            },
            headerOption: {
                toolbar_buttons: [
                    {
                        id: "refresh",
                        icon: "el-icon-refresh-right",
                        show: true,
                        method: () => {
                            _this.initSaleOrderList();
                        },
                    },
                ],
            },
            dataList: [],
            tableOptions: {
                ref: "SelectSaleOrderTable",
                container: ".select_sale_order_container",
                radioSelect: true,
                columns: [
                    {
                        label: "销售单号",
                        prop: "code",
                        align: "center",
                    },
                    {
                        label: "销售日期",
                        prop: "order_date",
                        align: "center",
                        width: 90,
                    },
                    {
                        label: "客户",
                        prop: "client_display",
                        align: "center",
                    },
                    {
                        label: "销售数量",
                        prop: "qty",
                        align: "center",
                    },
                    {
                        label: "销售金额",
                        prop: "amount",
                        align: "center",
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                    {
                        label: "退货数量",
                        prop: "return_qty",
                        align: "center",
                    },
                    {
                        label: "退货金额",
                        prop: "return_amount",
                        align: "center",
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                ],
                pagination: {
                    pageIndex: 1,
                },
                getMaxHeight() {
                    return $(_this.getActiveTabsContainer()).height() * 0.8 - 100;
                },
            },
        };
    },
    watch: {
        data: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        init() {
            const _this = this;
            if (!_this.data) {
                return;
            }
            _this.searchForm = {
                state: '',
            };
            _this.initSaleOrderList(true);
        },
        initSaleOrderList(init) {
            const _this = this;
            _this.dataList = [];
            if (init) {
                _this.tableOptions = _this.resetTablePagination(_this.tableOptions);
            }
            let queryData = _this.getQueryParams(_this.tableOptions, _this.searchForm);
            queryData.select_order = _this.data.sale_order_sid || '-1';
            return _this.fetchData(_this.$api.API_FindJxcSaleOrders, queryData).then(res => {
                _this.dataList = res.data || [];
                _this.tableOptions = _this.setTableTotal(_this.tableOptions, res);
                let filter = _this.dataList.filter(item => item.sid === queryData.select_order);
                if (_this.$utils.isNotEmptyList(filter) && _this.$refs.selectTable) {
                    _this.$refs.selectTable.toggleRowSelection(filter[0], true);
                }
            });
        },
        handleHeaderEvent(event) {
            const _this = this;
            _this.searchForm = $.extend({}, _this.searchForm, event.searchForm);
            _this.initSaleOrderList(true);
        },
        handleTableEvent(event) {
            if (event.type === 'page') {
                this.getList();
            }
        },
        confirm(event) {
            const _this = this;
            let selectData = undefined;
            if (_this.$refs.selectTable) {
                selectData = _this.$refs.selectTable.getSelection();
            }
            if (!selectData) {
                _this.$message.error('请选择销售订单！');
                return;
            }
            event._component.initData4Sale(selectData.sid);
            _this.$emit('event', 'closeDialog');
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.select_sale_order_container {
    width: 100%;
    height: 100%;
}
</style>
